<template>
	<view class="all">
		<u-sticky bgColor="#fff">
		<view class="tabs">
			
				<u-tabs :activeStyle="{color: '#5398F6',fontWeight: 'bold',}" :list="list1" :current="tabcurrent"
					itemStyle="padding-left: 15px; padding-right: 15px; height: 80rpx;" @click="click">
				</u-tabs>
			
		</view>
		</u-sticky>
		<!-- 全部订单 -->
		<view class="" v-if="dataList.length">
			<view class="container" v-if="tabcurrent==0">
				<view class="item" v-for="(item,index) in dataList" :key="index" @click="toDetial(item)">
					<view class="left">
						<image class="img" :src="item.institution_type.home_img" mode=""></image>
					</view>
					<view class="right">
						<view class="line_1">
							<text class="text_1">{{item.institution_type.home_type}}</text>
							<text class="text_2">{{item.status}}</text>
						</view>
						<view class="line_2">
							￥{{item.institution_type.home_price}}/月
						</view>
						<view class="line_3" v-if="item.status=='已预约'&&item.amount_paid==''">
							看房日期：{{item.visitDate}}
						</view>
						<view class="line_3" v-else>
							入住日期：{{item.search_time[0]}}-{{item.search_time[1]}}
						</view>
						<view class="line_4">
							<text class="text_3" >联系人：{{item.contacts}}</text>
							<text class="text_4">{{item.amount_paid=="500.00"?"订金￥500":"预约看房"}} </text>
						</view>
					</view>
				</view>
			</view>
			<!-- 已预约 -->
			<view class="container" v-if="tabcurrent==1">
				<view class="item" v-for="(item,index) in dataList" :key="index" @click="toDetial(item)">
					<view class="left">
						<image class="img" :src="item.institution_type.home_img" mode=""></image>
					</view>
					<view class="right">
						<view class="line_1">
							<text class="text_1">{{item.institution_type.home_type}}</text>
							<text class="text_2">{{item.status}}</text>
						</view>
						<view class="line_2">
							￥{{item.institution_type.home_price}}/月
						</view>
						<view class="line_3">
							<text v-if="item.amount_paid=='500.00'">入住日期：{{item.search_time[0]}}-{{item.search_time[1]}}</text>
							<text v-else>看房日期：{{item.visitDate}}</text>
							
						</view>
						<view class="line_4">
							<text class="text_3">联系人：{{item.contacts}}</text>
							<text class="text_4">{{item.amount_paid=="500.00"?"订金￥500":"预约看房"}} </text>
						</view>
					</view>
				</view>
			</view>
			<!-- 待处理 -->
			<view class="container" v-if="tabcurrent==2">
				
					<view class="item" v-for="(item,index) in dataList" :key="index" @click="toDetial(item)">
						<view class="left">
							<image class="img" :src="item.institution_type.home_img" mode=""></image>
						</view>
						<view class="right">
							<view class="line_1">
								<text class="text_1">{{item.institution_type.home_type}}</text>
								<text class="text_2" style="color:#FF8330;">{{item.status}}</text>
							</view>
							<view class="line_2">
								￥{{item.institution_type.home_price}}/月
							</view>
							<view class="line_3">
								入住日期：{{item.search_time[0]}}-{{item.search_time[1]}}
							</view>
							<view class="line_4">
								<text v-if="item.refundNot!=0&&item.renewalNot==0" class="text_3" style="color: #E82828;">提前退房</text>
								<text v-if="item.refundNot==0&&item.renewalNot!=0" class="text_3" style="color: #E82828;">续费入住</text>
								<text class="text_4">房间号：{{item.roomNum}}</text>
							</view>  
						</view>
					</view>
			</view>
			<!-- 已入住 -->
			<view class="container" v-if="tabcurrent==3">
				<view class="item"  v-for="(item,index) in dataList" :key="index" @click="toDetial(item)">
					<view class="left">
						<image class="img" :src="item.institution_type.home_img" mode=""></image>
					</view>
					<view class="right">
						<view class="line_1">
							<text class="text_1">{{item.institution_type.home_type}}</text>
							<text class="text_2">{{item.status}}</text>
						</view>
						<view class="line_2">
							￥{{item.institution_type.home_price}}/月
						</view>
						<view class="line_3">
							入住日期：{{item.search_time[0]}}-{{item.search_time[1]}}
						</view>
						<view class="line_4">
							<text class="text_3">联系人：{{item.contacts}}</text>
							<text class="text_4">房间号：{{item.roomNum}}</text>
						</view>
					</view>
				</view>
			</view>
			<!-- 已完成 -->
			<view class="container" v-if="tabcurrent==4">
				<view class="item"  v-for="(item,index) in dataList" :key="index" @click="toDetial(item)">
					<view class="left">
						<image class="img" :src="item.institution_type.home_img" mode=""></image>
					</view>
					<view class="right">
						<view class="line_1">
							<text class="text_1">{{item.institution_type.home_type}}</text>
							<text class="text_2">{{item.status}}</text>
						</view>
						<view class="line_2">
							￥{{item.institution_type.home_price}}/月
						</view>
						<view class="line_3">
							入住日期：{{item.search_time[0]}}-{{item.search_time[1]}}
						</view>
						<view class="line_4" v-if="item.amount_paid==0">
							<text class="text_3">联系人：{{item.contacts}}</text>
							<text class="text_4">房间号：{{item.roomNum}}</text>
						</view>
						<view class="line_4" v-else>
							<text class="text_5">已退费：￥{{item.amount_paid}}</text>
							<text class="text_6">提前退房</text>
						</view>
					</view>
				</view>
			</view>
			<!-- 已取消 -->
			<view class="container" v-if="tabcurrent==5">
			<view class="item"  v-for="(item,index) in dataList" :key="index" @click="toDetial(item)">
				<view class="left">
					<image class="img" :src="item.institution_type.home_img" mode=""></image>
				</view>
				<view class="right">
					<view class="line_1">
						<text class="text_1">{{item.institution_type.home_type}}</text>
						<text class="text_2">{{item.status}}</text>
					</view>
					<view class="line_2">
						￥{{item.institution_type.home_price}}/月
					</view>
					<view class="line_3">
						<text v-if="item.amount_paid=='500.00'">入住日期：{{item.search_time[0]}}-{{item.search_time[1]}}</text>
						<text v-else>看房日期：{{item.visitDate}}</text>
					</view>
					<view class="line_4" v-if="item.amount_paid=='0.00'">
						<text class="text_3">联系人：高小见</text>
						<text class="text_4">预约看房</text>
					</view>
					<view class="line_4" v-else>
						<text class="text_3" style="color: #E82828;">已退费：￥{{item.amount}}</text>
						<text class="text_4">订金：￥{{item.amount_paid}}</text>
					</view>
				</view>
			</view>
		</view>
		</view>
		<view class="noDates" v-else>
			<view class="noDate">
				<image style="width: 374rpx;height: 270rpx;" src="../../static/img/no_list (1).png" mode=""></image>
				<view class="">
					暂无数据
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	import {
		getOrderList
	} from '@/utils/api.js'
	export default {
		data() {
			return {
				dataList: [],
				tabcurrent: 0,
				list1: [{
					name: '全部',
				}, {
					name: '已预约',
				}, {
					name: '待处理'
				}, {
					name: '已入住'
				}, {
					name: '已完成'
				}, {
					name: '已取消'
				}, ],
				status: 0
			};
		},
		onLoad(option) {
			console.log(option,'xxxxxxxxxxxxxxxxxx');
			try{
				if(Object.keys(option).length){
					console.log(option,'option++');
					this.tabcurrent=option.id
				}
			}catch(e){
				//TODO handle the exception
			}
			let parms = {
				page: 1,
				page_size: 10
			}
			getOrderList(parms).then(res => {
				if (res.data.meta.status == 200) {
					this.dataList = res.data.data.data
				}
			})
		},
		onShow() {
			console.log(this.tabcurrent,'this.tabcurrent');
			this.getKindDate()
		},
		onPullDownRefresh() {
				this.getKindDate()
		        uni.stopPullDownRefresh();//停止刷新
		    },
		methods: {
			//根据标签页获取相应数据
			getKindDate(){
				let parms = {
					page: 1,
					page_size: 10
				}
				if(this.tabcurrent == 0){
					getOrderList(parms).then(res => {
						if (res.data.meta.status == 200) {
							this.dataList = res.data.data.data
						}
					})
				}
				else if (this.tabcurrent == 1) {
					parms.status = 4
					getOrderList(parms).then(res => {
						if (res.data.meta.status == 200) {
							this.dataList = res.data.data.data
						}
					})
				} else if (this.tabcurrent == 2) {
					parms.status = 1
					getOrderList(parms).then(res => {
						if (res.data.meta.status == 200) {
							this.dataList = res.data.data.data
						}
					})
				}else if (this.tabcurrent == 3) {
					parms.status = 2
					getOrderList(parms).then(res => {
						if (res.data.meta.status == 200) {
							this.dataList = res.data.data.data
						}
					})
				}
				else if (this.tabcurrent == 4) {
					parms.status = 3
					getOrderList(parms).then(res => {
						if (res.data.meta.status == 200) {
							this.dataList = res.data.data.data
						}
					})
				}
				else{
					parms.status = 0
					getOrderList(parms).then(res => {
						if (res.data.meta.status == 200) {
							this.dataList = res.data.data.data
						}
					})
				}
			},
			click(item) {
				this.dataList=[]
				this.tabcurrent = item.index
				this.getKindDate()
				
			},
			toDetial(item){
				console.log(item,'****');
				if(item.status=='已预约'){
					uni.navigateTo({
						url: '/pages/order/order_1?orderId='+item.id
					})
				}
				else if(item.status=='待处理'){
					uni.navigateTo({
						url: '/pages/order/order_2?orderId='+item.id
					})
				}
				else if(item.status=='已入住'){
					uni.navigateTo({
						url: '/pages/order/order_3?orderId='+item.id
					})
				}
				else if(item.status=='已完成'){
					uni.navigateTo({
						url: '/pages/order/order_4?orderId='+item.id
					})
				}
				else if(item.status=='已取消'){
					uni.navigateTo({
						url: '/pages/order/order_5?orderId='+item.id
					})
				}
			},
			
		}
	}
</script>

<style lang="scss" scoped>
	.all {
		.tabs {
			margin-top: 2rpx;
		}
		.noDates{
			
			.noDate{
				height:600rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
			}
		}
		.container {
			margin-top: 10rpx;
			
			
			.item {
				background-color: #ffffff;
				display: flex;
				// justify-content: space-between;
				align-items: center;
				padding: 32rpx 24rpx;

				.left {
					width: 35%;
					height: 180rpx;

					.img {
						width: 240rpx;
						height: 180rpx;
						border-radius: 12rpx;
					}
				}

				.right {
					width: 65%;
					margin-left: 20rpx;
					line-height: 45rpx;

					.line_1 {
						display: flex;
						justify-content: space-between;

						.text_1 {
							font-size: 28rpx;
							font-weight: bold;
							color: #242424;
						}

						.text_2 {
							font-size: 28rpx;
							font-weight: bold;
							color: #5398F6;
						}
					}

					.line_3 {
						font-size: 26rpx;
						font-weight: 500;
						color: #686868;
					}

					.line_2 {
						color: #E82828;
						font-size: 26rpx;
						font-weight: bold;
					}

					.line_4 {
						display: flex;
						justify-content: space-between;

						.text_3 {
							font-size: 26rpx;
							font-weight: 500;
							color: #686868;
						}

						.text_4 {
							font-size: 26rpx;
							font-weight: bold;
							color: #484848;
						}
						.text_5{
							font-size: 26rpx;
							font-weight: bold;
							color: #E82828;
						}
						.text_6{
							font-size: 26rpx;
							font-weight: bold;
							color: #484848;
						}
					}
				}
			}
		}
	}
</style>